<!-- 编辑合同2 -->
<style media="screen">
  .abs-costitem {
    position: absolute;
    z-index: 999;
    width: 203px;
    border: 1px solid #ddd;
    line-height: 32px;
    background-color: #fff;
  }
  .abs-costitem li {
    text-indent: 0.5em;
  }
  .abs-costitem li:hover {
    color: #fff;
    background-color: #838eba;
  }
  .alert-mes{
    color:#ec4151;
  }

  .t-mark {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    z-index: 999;
  }
  .lingtou {
    width: 595px;
    height: 320px;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
  }
  .lingtou .title {
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    height: 45px;
    text-align: center;
  }
  .lingtou .container-t {
    height: 220px;
    background-color: #f1f1f1;
    padding: 0 24px;
  }
  .data-sj::before {
    top: 20px;
  }


  .pay-plan-table .body .first-expense-row .item-6{
    position: relative;
    width: 120px;
  }
  .pay-plan-table .body .first-expense-row .item-6 span{
    position: absolute;
    width: 100%;
    height: 38px;
    left:0;
    top:50%;
    padding: 6px 2px;
    margin-top: -17px;
    display: inline-block;
  }
  .pay-plan-table .body .first-expense-row .item-6 .form-control{
    position: absolute;
    height: 34px;
    width: 90%;
    margin:2px 5%;
    left:0;
    top:0;
    padding: 6px 2px;
    display: inline-block;
  }
  .pay-plan-table .item-6{
    width: 120px;
  }
  .pay-plan-table .body .other-expense-row .item-6 .form-control{
    height: 50px;
    display: inline-block;
  }


.turnover-take-table {
		width: 100%;
		border: 1px solid #ddd !important;
		border-collapse: collapse;
		background:linear-gradient(180deg,rgba(250,250,250,1) 0%,rgba(234,234,234,1) 100%);
	}
	.turnover-take-table td, .turnover-take-table th {
		font-weight: normal !important;
		line-height: 40px !important;
	}
	.turnover-take-table th {
		border: none;
	}
	.turnover-take-table .tr-ul {
		background:#fff;
	}
	.turnover-take-table td {
		border: 1px solid #ddd !important;
	}
	.turnover-take-table .tr-ul input {
		border: 0;
		width: 100%;
		height: 100%;
		outline: medium;
		text-align: center;
	}
	.bg-gray {
		background: #f1f1f1;
  }
  .iconHover {
  position: relative;
}

.hoverText {
  display: none;
  position: absolute;
  z-index: 9999;
  left: -185px;
  top: 6px;
  width: 378px;
  flex-direction: column;
  align-items: center;
  padding: 16px 10px;
  color: #999;
}

.hoverText div {
  position: absolute;
  display: inline-block;
  top: 11px;
  left: 185px;
  width: 0;
  height: 0px;
  content: '';
  border-style: solid;
  border-width: 6px;
  border-color: #fff #fff transparent transparent;
  transform: rotate(314deg);
  box-shadow: 2px -2px 2px #ccc;
  color: #999;
}

.hoverText ul {
  width: 100%;
  padding: 8px 18px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
}

.iconHover:hover .hoverText {
  display: flex;
}

.hl-radio{
  margin-right: 15px;
}
.instro li{
  display: flex;
  flex-direction: column;
}
.hl-checkbox{
  line-height: 15px;
}
.textOH{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.insertbox input{
  width: 76px;
  margin-right: 10px;
}
.dy-flex{
  display: flex;
  align-items: center;
}
.entry-container{
  border:1px solid rgba(232,229,226,1);
  margin-bottom: 10px;
}
.entry-container:hover{
  border:1px solid #565E99;
}
.entry-header{
  height: 46px;
  background: #F2F2F2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;

}

.entry-header ul{
  display: flex;
  align-items: center;
}
.entry-header ul input{
  width: 76px;
  height: 34px;
  background: #fff;
  border-radius:4px;
  color: #EA8E6F;
  border:1px solid rgba(229,229,229,1);
  margin-left: 10px;
}
.entry-header ul li{
  display: flex;
  align-items: center;
}
.entry-body{
  background: #fff;
  height: 78px;
  padding:0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.entry-body ul{
  display: flex;
  align-items: center
}
.entry-body ul input{
  width: 96px;
  margin-right: 10px;
}
.entry-container{
  border-radius: 4px;
  overflow: hidden;
}
.color_Orange{
  color:#EA8E6F
}
.orangeBlock{
  display: inline-block;
  width:12px;
  height:2px;
  background:#999;
  margin:0 15px;
}
.ct-ladder-list label::before{
  top:0
}
.setheight .hl-radio::before{
  top:4px
}
.setheight .hl-radio.active::after{
  top:8px;
}
.rent-container{
  border-radius:4px;
  border:1px solid rgba(232,229,226,1);
  margin-top: 14px;
}


  .templateList {
    width: 780px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
    border-radius: 6px;
  }

  .templateList_title {
    height: 46px;
    text-align: center;
    line-height: 46px;
  }

  .templateList_content {
    background: #F9F9F9;
    padding: 24px 0px 77px 16px;
  }

  .TC_header {
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    padding-right: 20px;
    margin-bottom: 18px;
  }

  .TC_header>div {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .TC_header>ul {
    display: flex;
    align-items: center;
  }

  .TC_header>ul>li {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .TC_mask {
    display: none;
    position: absolute;
    z-index: 9;
    width: 140px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    /* text-align: center; */
    text-indent: 47px;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
  }

  .check-auth {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-auth-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #44B548;
    width: 13px;
    height: 13px;
    border: 1px solid #44B548;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-item {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    right: 10px;
    top: 9px;
  }

  .check-item-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
    margin-right: 10px;
  }

  .tem-item {
    width: 140px;
    height: 36px;
    background: #44B548;
    box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    text-indent: 10px;
    color: #fff;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .tem-item:hover .TC_mask {
    display: block
  }

  .tem-item:hover .TC_text {
    -webkit-filter: blur(3px);
  }

  .tem-item-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .TC_selected_active {
    color: #44B548
  }

  .TC_selected_icon {
    position: absolute;
    z-index: 9999;
    right: 12px;
    top: 12px;
    font-size: 12px;
  }

  .templateList_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .TC_close_icon {
    float: right;
    margin: 15px 20px 0 0;
  }
</style>
<section id="contract-creat2" >
  <section>
    <div class="contract-title">
      合同管理 - 编辑合同 - 租赁信息
    </div>
    <!-- //签订日期 -->
    <div class="contract-deta">
      <div class="dy-flex">
        <div class="dy-fx-1">
          <span>签订日期：</span>
          <label class="icon-Gm-calendar relative">
            <input type="text" class="inp bg-fff form-control" readonly placeholder="选择日期" id="signedDate" @blur="hideFkjH('qdrq',$event)"/>
          </label>
        </div>
      </div>
      <div class="dy-flex mt-15">
        <div style="margin-right:30px;">
          <span><span class="required">*</span>租赁期限：</span>
          <label class="icon-Gm-calendar relative">
            <input type="text" class="inp bg-fff form-control" readonly placeholder="起始日期" id="beginDate"  @blur="blurTime(1)"/>
          </label>
          <b>-</b>
          <label class="icon-Gm-calendar relative">
            <input type="text" class="inp bg-fff form-control" readonly placeholder="截止日期" id="endDate"  @blur="blurTime(2)"/>
          </label>
        </div>
        <div class="dy-fx-1">
          <span>快捷选择：</span>
          <ul class="ct-select-year" style="cursor: pointer;">
            <li :class="{active: item.name == setYear.active}" v-for="item in setYear.list" @click="setYearLink(item.code,item.name)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="dy-flex mt-15">
        <div class="dy-fx-1">
          <span><span class="required">*</span>收款日：</span>
          <ul class="ct-select-year">
            <li :class="{active: item.code == billDate.act, 'js-sks':true}" v-for="item in billDate.list" @click="dateSet(item.code)" style="width: 100px;cursor:pointer;">{{item.name}}</li>
          </ul>
          <ul class="ct-select-year ml-24">
            <li :class="{active: item.code == billDate.act1, 'js-sks1':true}" v-for="item in billDate.list1" @click="dateSet1(item.code)" style="width: 100px;cursor:pointer;">{{item.name}}</li>
          </ul>
          <span class="ml-24">
            <input type="text" class="bg-fff form-control inline js-skrr" placeholder="整数" style="width:60px;" v-model="rentBill.day" @blur="blurDate" />
            <span v-if="billDate.act1 == 'TS'">个自然日</span>
          </span>
        </div>
      </div>
      <div style="padding-left: 70px; color: #f60; padding-top: 6px;">
        <span v-if="billDate.act1 == 'TS'">例：设置为5天，则1月8日开始的账期付款截止时间为1月13号</span>
        <span v-if="billDate.act1 == 'RQ' && billDate.act == 'B'">例：设置为5，则5月5日和6月3号开始的账期付款截止时间都是5月5号</span>
        <span v-if="billDate.act1 == 'RQ' && billDate.act == 'A'">例：设置为5，则5月5日和6月3号开始的账期付款截止时间都是6月5号</span>
      </div>
      <div class="dy-flex mt-15">
        <div class="dy-fx-1">
          <span class="required">*</span>
          <span>首期收款日：</span>
          <label class="icon-Gm-calendar relative">
            <input type="text" class="inp bg-fff form-control" id="SqDate" readonly placeholder="选择日期" @blur="blurHide" />
          </label>
        </div>
      </div>
    </div>
    <!-- 固定租金 -->
    <div class="ct-rent-deposit" v-if="isGDflag">
      <div class="clearfix">
        <div class="pull-left ct-rd">固定租金</div>
        <div class="pull-right">
          <span class="ct-rd-del" @click="delRent" v-if="rentFlag">
            <b class="icon-Gm-delete-2"></b>
            删除
          </span>
          <span class="ct-rd-add" @click="addRent" v-if="!rentFlag">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
      <div class="ct-rd-wrap"  v-if="rentFlag">
        <div class="ct-rd-tit border-b">
          <!-- 有单元数  则计费方式按单元面积计算  否则按工位个数计算 -->
          <span v-if="getCtPrevData.contactType.active == 'ER'">计费方式：<b>按单元面积</b></span>
          <span v-if="getCtPrevData.contactType.active == 'WR'">计费方式：<b>工位个数</b></span>
          <span v-if="getCtPrevData.projectInfo.units.length > 0">租赁面积：<b >{{utAge | toFixed2}}m²</b></span>
          <span v-if="getCtPrevData.projectInfo.units.length == 0">工位个数：<b >{{wpNum}}个</b></span>
          <span>车位数：<b>{{stNum}}个</b></span>
        </div>

        <div class="dy-flex ct-rd-in border-b">
          <div class="dy-fx-1 pt-8 pb-8">
            <span><i class="required">*</i>租金单价：</span>
            <input type="text"
              class="form-control w-1"
              v-model="oPrice"
              @blur="calculateRent(oPrice, 1,$event)"
            />
            <div class="select-ul bg-filter ct-dw select-ct-dw">
              <span class="select-name">{{setUnit[setUnit.active].list[setUnit.nIndex]}}</span>
              <ul>
                <li v-for="(item, index) in setUnit[setUnit.active].list" @click="setUnitGr(index)">{{item}}</li>
              </ul>
            </div>
          </div>
          <div class="dy-fx-1 border-l pt-8 pb-8">
            <span><i class="required">*</i>日租金：</span>
            <input
              type="text"
              class="form-control w-1"
              v-model="dRent"
              @blur="calculateRent(dRent, 2,$event)"
            /> 元/天
            <i class="alert-mes">{{dayRentPriceAlert}}</i>
          </div>
        </div>
        <div class="dy-flex ct-rd-in border-b">
          <div class="dy-fx-1 pt-8 pb-8">
            <span><i class="required">*</i>月租金计算方式：</span>
            <ul class="ct-select-result">
              <li :class="{active: item.type == setRent.active}" v-for="item in setRent.list" @click="setRentMD(item.type)">{{item.name}}</li>
            </ul>
          </div>
          <div class="dy-fx-1 pt-8 pb-8" v-if="setRent.active == 'M'">
            <span><i class="required">*</i>月租金：</span>
            <input
              type="text"
              class="form-control w-1"
              v-model="mRent"
              @blur="calculateRent(mRent, 3,$event)"
            /> 元/月
            <i class="alert-mes">{{monthRentPriceAlert}}</i>
          </div>
        </div>
        <div class="dy-flex ct-rd-in rent-container"  style="margin:0">
          <div class="dy-fx-1 pt-8 pb-8">
            <span><i class="required">*</i>付款周期：</span>
            <b>付</b>
            <input type="text" class="form-control" style="width:45px;" v-model="rentBill.pay"  @blur="hideFkjH(rentBill.pay,$event,'pay')"  /> 月
          </div>
          <div class="dy-fx-1 border-l pt-8 pb-8">
            <span style="padding-left:5px;">租金滞纳金比例：</span>
            <input type="text" class="form-control w-1" v-model="rentBill.rentPercent"  @blur="hideFkjH(rentBill.rentPercent,$event)"  placeholder="(非必填)"/> %
          </div>
        </div>
      </div>
    </div>
    <!-- 租金押金 -->
  <div class="ct-ladder-rt mt-15" v-if="isYJflag">
    <div class="clearfix">
      <div class="pull-left ct-tit">租金押金</div>
      <div class="pull-right" @click="showRentDeposit">
        <span class="ct-rd-add"  v-if="rentDepositFlag">
		      <b class="icon-Gm-delete-2"></b>
		      删除
		    </span>
        <span class="ct-rd-add"  v-if="!rentDepositFlag">
          <b class="icon-Org-account"></b>
          新增
        </span>
      </div>
    </div>
    <div class="dy-flex ct-rd-in rent-container" v-if="rentDepositFlag">
      <div class="dy-fx-1 pt-8 pb-8">
        <span><i class="required">*</i>押付方式：</span>
        <b>押</b>
        <input type="text" class="form-control" style="width:45px;" v-model="rentBill.bet" @blur="hideFkjH(rentBill.bet,$event,'bet')" /> 月
        <input type="text" class="form-control" v-model="menoy" style="width:120px;" @blur="hideFkjH(menoy,$event)" /> 元
      </div>
      <div class="dy-fx-1 border-l pt-8 pb-8">
        <span style="padding-left:5px;">押金滞纳金比例：</span>
        <input type="text" class="form-control w-1" v-model="rentBill.proportion" @blur="hideFkjH(rentBill.proportion,$event)"  placeholder="(非必填)"/> %
      </div>
    </div>
  </div>
    <!-- 阶梯租金 -->
    <div class="ct-ladder-rt mt-15" v-if="jtzjFlag">
      <div class="clearfix">
        <div class="pull-left ct-tit">阶梯租金</div>
        <div class="pull-right">
          <span class="ct-rd-add" @click="addRentLd">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
			<!-- 合同模块 2019-05-17 迭代 start -->
			<div class="ladder-rent font-12 mt-10" v-if="rentLadder.length">
				<span>递增方式：</span>
				<span class="hl-radio color-999" style="white-space:nowrap;"
				:class="{active: ladderRentActive == item.dictCode}" @click="ladderRentSelect(item)" v-for="item in ladderRentArr">{{ item.dictName }}</span>
			</div>
			<!-- 合同模块 2019-05-17 迭代 end -->
      <div class="ct-ladder-wrap mt-15 border" v-if="rentLadder.length > 0">
        <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
          <div class="dy-fx-2">阶梯开始时间</div>
          <div class="dy-fx-1">递增率</div>
          <div class="dy-fx-2">租金单价({{setUnit[setUnit.active].list[0]}})</div>
          <div class="dy-fx-2">日租金(元/天)</div>
          <div class="dy-fx-1">月租金(元/月)</div>
          <div class="dy-fx-1">操作</div>
        </div>
        <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in rentLadder">
          <div class="dy-fx-2 border-r">
            <label class="icon-Gm-calendar relative">
              <input type="text" readonly class="inp w-max zdate"  @blur="vaoldDate($event)"/>
            </label>
          </div>
          <div class="dy-fx-1 border-r">
            <input type="text"
              class="w-max"
              v-model="item.lv"
              @blur="calculateRentLd(item.lv, index, 1,$event)"
              @focus="cancelbfb(rentLadder, index, 'lv', item.lv)"
            />
          </div>
          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max"
              v-model="item.dj"
              @blur="calculateRentLd(item.dj, index, 2 , $event)"
            />
          </div>
          <div class="dy-fx-2 border-r color-999">
            <input
              type="text"
              class="w-max"
              v-model="item.rz"
              @blur="calculateRentLd(item.rz, index, 3, $event)"
            />
          </div>
          <div class="dy-fx-1 border-r color-999">
            <!-- {{item.yz | formatNum}} -->
            <input
              type="text"
              class="w-max"
              v-model="item.yz"
              @blur="calculateRentLd(item.yz, index, 4, $event)"
            />
          </div>
          <div class="dy-fx-1">
            <a href="javascript:;" @click="delLd(index, rentLadder)">删除</a>
          </div>
        </div>
      </div>
    </div>
		<!-- 免租期 -->
    <div class="ct-free-rt mt-15" v-if="mzqFlag">
      <div class="clearfix">
        <div class="pull-left ct-tit">免租期/装修期</div>
        <div class="pull-right">
          <span class="ct-rd-add" @click="addFreePd">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
      <div class="ct-free-wrap mt-15 border" v-if="freePeriod.length > 0">
        <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
          <div class="dy-fx-2">免租/装修开始时间</div>
          <div class="dy-fx-2">免租/装修结束时间</div>
          <div class="dy-fx-1">操作</div>
        </div>
        <div class="dy-flex ct-ladder-list border-b" v-for="(item, index) in freePeriod">
          <div class="dy-fx-2 border-r">
            <label class="icon-Gm-calendar relative">
              <input type="text" readonly class="inp w-max bkdate"  @blur="yzJt($event, 1)" />
            </label>
          </div>
          <div class="dy-fx-2 border-r">
            <label class="icon-Gm-calendar relative">
              <input type="text" readonly class="inp w-max ekdate" @blur="yzJt($event, 2)" />
            </label>
          </div>
          <div class="dy-fx-1">
            <a href="javascript:;" @click="delLd(index, freePeriod)">删除</a>
          </div>
        </div>
      </div>
    </div>
    	<!-- 营业额抽成 start -->
		<!-- <div class="turnover-take mt-15" v-if="getCtPrevData.contactType.active == 'ER' && quanxian.indexOf('c307') > -1">
			<div class="clearfix">
			  <div class="pull-left" style="color: #afb6be;">营业额抽成</div>
			  <div class="pull-right">
			    <span class="ct-rd-add" v-if="yyeFlag" @click="hideYYE">
			      <b class="icon-Gm-delete-2"></b>
			      删除
			    </span>
					<span class="ct-rd-add" v-if="!yyeFlag" @click="showYYE">
					  <b class="icon-Org-account"></b>
					  新增
					</span>
			    </span>
			  </div>
			</div>
			<div v-if="yyeFlag">
				<div class="clearfix mt-10">
					<div class="pull-left font-12">
						<span class="mr-10 color-666">抽成方式:</span>
						<span class="hl-radio color-999" style="white-space:nowrap;" :class="{active: turnoverCode == item.dictCode}" @click="selectType(item)" v-for="item in turnoverArr">{{ item.dictName }}</span>
					</div>
					<div class="pull-right font-12">
						<span class="hl-checkbox color-999" :class="{active: turnoverCheckBox == 'Y' }" style="padding-left: 6px;margin-right: 0;" @click="takeHigh">与租金取其高</span>
					</div>
				</div>
				<table cellpadding="0" border="0" cellspacing="0" class="turnover-take-table">
					<tr class="tr-header color-gray">
						<th>
							<span class="required">*</span>
							基数下限（＞元）
						</th>
						<th>
							<span class="required">*</span>
							基数上限（≤元）
						</th>
						<th>
							<span class="required">*</span>
							抽成比例（%）
						</th>
						<th>抽成下限（元）</th>
						<th>抽成上限（元）</th>
						<th>滞纳金比例（%）</th>
						<th><span class="required">*</span>付款周期（月）</th>
						<th>操作</th>
					</tr>
					<tr class="tr-ul" v-for="(item, index) in tableArr">
						<td style="min-width: 138px;">
							<span class="color-999 bg-gray block">{{ item.base_val_down_limit }}</span>
						</td>
						<td style="min-width: 138px;">
							<input type="number" v-if="index < tableArr.length-1" v-model="item.base_val_up_limit" @blur="blurYYE(index)">
							<span class="color-999 bg-gray block" v-if="index == tableArr.length-1">不限</span>
						</td>
						<td>
							<input type="number" v-model="item.commission_percent">
						</td>
						<td>
							<input type="number" v-model="item.commission_down_limit" @blur="isLowerYYE(index)">
						</td>
						<td>
							<input type="number" v-model="item.commission_up_limit" @blur="isUpYYE(index)">
						</td>
						<td>
							<input type="number" v-model="item.late_fee_percent">
						</td>
						<td :rowspan="tableArr.length" v-if="index == 0" class="relative" style="min-width: 110px;overflow: hidden;">
							<input type="number" class="absolute" style="left: 0;top: 0;" v-model="item.payemnt_period" @blur="yyePayment" v-if="turnoverCheckBox == 'N'">
							<span v-if="turnoverCheckBox == 'Y'" style="margin-left: -15px;">{{ item.payemnt_period }}</span>
						</td>
						<td style="min-width: 79px;">
							<a href="javascript:;" @click="addYYE(index)">新增</a>
							<a href="javascript:;" class="ml-5" v-if="tableArr.length > 1" @click="removeYYE(index)">删除</a>
						</td>
					</tr>
				</table>
			</div>
		</div> -->
    <!-- 营业额抽成 end -->


    <!-- 营业额抽成 start -->
	<div class="turnover-take mt-15 setheight" v-if="getCtPrevData.contactType.active == 'ER' && quanxian.indexOf('c307') > -1"  @click="hidePlanBox">
		<div class="clearfix">
		  <div class="pull-left" style="color: #afb6be;">营业额抽成</div>
		  <div class="pull-right">
		    <span class="ct-rd-add" v-if="yyeFlag" @click="hideYYE">
		      <b class="icon-Gm-delete-2"></b>
		      删除
		    </span>
				<span class="ct-rd-add" v-if="!yyeFlag" @click="showYYE">
				  <b class="icon-Org-account"></b>
				  新增
				</span>
		    </span>
		  </div>
		</div>
		<div v-show="yyeFlag">
			<div class="clearfix mt-10" style="margin-bottom:10px;">
				<div class="pull-left" style="display:flex;align-items:center">
					<span class="mr-10 color-666" style="width: 65px">抽成方式:</span>
          <span class="hl-radio color-666" style="white-space:nowrap;" :class="{active: turnoverCode == item.dictCode}" @click="selectType(item)" v-for="(item,index) in turnoverArr" :style="{marginRight:index == turnoverArr.length-1?'10px':''}">{{ item.dictName }}</span>
          <span class="iconHover">
              <li class="icon-Gm-explain"></li>
              <li class="hoverText">
                  <div></div>
                  <ul class="instro">
                      <li style="margin-bottom:15px">
                        <span style="font-size:14px;margin-bottom: 6px">分段抽成</span>
                        <span>选取营业额处于基数区间的所有规则阶梯计算抽成金额</span>
                      </li>
                      <li>
                        <span style="font-size:14px;margin-bottom: 6px">一次性抽成</span>
                        <span>选取营业额处于基数区间的此一条规则单独计算抽成金额</span>
                      </li>
                  </ul>
              </li>
          </span>
        </div>
				<div class="pull-right font-12" style="display:flex;align-items:center">
          <span class="hl-checkbox color-999" :class="{active: turnoverCheckBox == 'Y' }" style="padding-left: 6px;margin-right: 0;" @click="takeHigh">与租金取其高</span>
          <span class="iconHover" style="margin-left:10px;">
            <li class="icon-Gm-explain"></li>
            <li class="hoverText" style="left: -345px">
                <div style="left: 345px;"></div>
                <ul class="instro">
                  租金与租金取其高时，根据抽成与租金金额大小确定每期账单费用
                </ul>
            </li>
          </span>
				</div>
      </div>
      <div class="insertbox">
        付款周期：<input type="text" class="form-control ct-number-ipt" v-model="paymentCycle" @blur="yyePayment" :disabled="turnoverCheckBox == 'Y'" style="background:#fff">月
      </div>
      <div class="clearfix contract-deta dy-flex" >
        <div class="pull-left " style="display:flex;align-items:center">
          <span class="mr-10 color-666" style="width: 65px">收款日:</span>
          <span class="hl-radio color-666" style="white-space:nowrap;" :class="{active: paymentTypeCode == item.code}" @click="selectPayment(item.code)" v-for="(item,index) in paymentType" >{{ item.name }}</span>
        </div>
        <div class="dy-flex" v-if="paymentTypeCode == 'CM'">
          <ul class="ct-select-year">
            <li :class="{active: item.code == billDateQHcode, 'js-sks':true}" v-for="item in billDateQH" @click="billDateQHcode = item.code" style="width: 100px;cursor:pointer;">{{item.name}}</li>
          </ul>
          <ul class="ct-select-year ml-24">
            <li :class="{active: item.code == billDaycode, 'js-sks1':true}" v-for="item in billDay" @click="billDaycode = item.code" style="width: 100px;cursor:pointer;">{{item.name}}</li>
          </ul>
          <span class="ml-24">
            <input type="text" class="bg-fff form-control inline js-skrr" style="width:60px;" v-model="dayNum"  />
            <span v-if="billDaycode == 'TS'">个自然日</span>
          </span>
        </div>
      </div>

      <div class="entry-container" v-for="(item, index) in tableArr">
        <div class="entry-header">
          <ul>
            基数区间：
            <li class="color_Orange">{{item.base_val_down_limit}}
              <span class="orangeBlock"></span>
              <input type="text" class="form-control ct-number-ipt color_Orange" style="margin:0" v-if="index < tableArr.length-1" v-model="item.base_val_up_limit" @blur="blurYYE(index)">
              <span v-if="index == tableArr.length-1">不限</span>
              <span style="margin-left: 10px;color:#999">(元)</span>
            </li>
          </ul>
          <ul>
            <span class="ct-rd-add" @click="removeYYE(index)" v-if="tableArr.length > 1"><b class="icon-Gm-delete-2"></b>
              删除此抽成
            </span>
          </ul>
        </div>
        <div class="entry-body">
          <ul>抽成比例：<input type="text" class="form-control ct-number-ipt" v-model="item.commission_percent">%</ul>
          <ul>抽成区间：<input type="text" class="form-control ct-number-ipt" v-model="item.commission_down_limit" @blur="isLowerYYE(index)" placeholder="(非必填)"> - <input v-model="item.commission_up_limit" @blur="isUpYYE(index)" type="text" class="form-control ct-number-ipt" style="margin-left: 10px" placeholder="(非必填)">（元）</ul>
          <ul>滞纳金比例：<input type="text" class="form-control ct-number-ipt" v-model="item.late_fee_percent" placeholder="(非必填)">%</ul>
        </div>
      </div>
      <div style="margin:17px 0 30px;font-size:14px">
        <span class="ct-rd-add" @click="addYYE"><b class="icon-Org-account" ></b>
          新增一条抽成
        </span>
      </div>
		</div>
	</div>
	<!-- 营业额抽成 end -->
    <!-- 周期性费项 -->
    <div class="ct-free-rt mt-15">
      <div class="clearfix">
        <div class="pull-left ct-tit">周期性费项</div>
        <div class="pull-right">
          <span class="ct-rd-add" @click="addCostItem('P')">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
      <div class="ct-free-wrap mt-15 border" v-if="ptotal > 0">
        <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
          <div class="dy-fx-3">费用名</div>
          <div class="dy-fx-3">单价</div>
          <div class="dy-fx-2">日金额</div>
          <div class="dy-fx-2">月金额</div>
          <div class="dy-fx-2">付款周期</div>
          <div class="dy-fx-1" style="line-height: 20px">滞纳金比例</div>
          <div class="dy-fx-4">计费时间</div>
          <div class="dy-fx-2">操作</div>
        </div>
        <div
          class="dy-flex ct-ladder-list border-b"
          v-for="(item, index) in costItem"
          v-if="item.expense_type == 'P'"
          style="height: auto; line-height:30px;"
        >
          <div class="dy-fx-3 border-r">
            <span @click="getcostY(index, $event, 'P', '203')" class="data-sj" style="margin:0;">
              <input
                type="text"
                class="w-max color-999 text-center maopao"
                v-model="item.expense_name"
                readonly
                style="position:relative;top:-10px;"
              >
            </span>
          </div>
          <div class="dy-fx-3 border-r overflow relative dy-flex" style="align-items: center">
            <input
              type="text"
              class="w-max bg-fff"
              style="text-align: center;text-indent: 8px;width: 50%"
              v-model="item.price"
              @blur="hideFkjH(item.price,$event,'po', index)"
            >
            <span class="textOH"  style="line-height: 20px;height: 20px;z-index: 1;width: 50%;border-left: 1px solid #E5E5E5;">{{item.unitsVal || '--'}}</span>
          </div>
          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.priceDay"
              @blur="hideFkjH(item.priceDay,$event,'po',index, 'd')"
            >
          </div>
          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.priceMonth"
              @blur="hideFkjH(item.priceMonth,$event,'po',index, 'm')"
            >
          </div>
          <div class="dy-fx-2 border-r dy-flex">
            <div class="dy-fx-2">
              <input
                type="text"
                class="w-max text-center"
                v-model="item.expense_period"
                @blur="hideFkjH(item.expense_period,$event)"
              >
            </div>
            <span class="dy-fx-1 border-l dy-flex" style="justify-content: center; align-items: center;">月</span>
          </div>
          <div class="dy-fx-1 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.late_fee"
              @blur="addbfb(item.late_fee, index)"
              @focus="cancelbfb(costItem, index, 'late_fee', item.late_fee)"
            >
          </div>
          <div class="dy-fx-4 border-r dy-flex" @click="putEindex(index)" style="justify-content: center; align-items: center;">
            <div>
              <div v-if="item.customPeriod.length !== 0" style="line-height: 24px;" v-for="item1 in item.customPeriod">{{item1.begin_date}} 至 {{item1.end_date}}</div>
              <span v-if="!item.customPeriod.length">同租赁周期</span>
            </div>
          </div>
          <div class="dy-fx-2 dy-flex" style="justify-content: center; align-items: center;">
            <a href="javascript:;" @click="delCostItem(index)">删除</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 一次性费项 -->
    <div class="ct-rt-one mt-15">
      <div class="clearfix">
        <div class="pull-left ct-tit">一次性费项</div>
        <div class="pull-right">
          <span class="ct-rd-add" @click="addCostItem('O')">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
      <div class="border mt-15" v-if="ototal > 0">
        <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
          <div class="dy-fx-3">费用名</div>
          <div class="dy-fx-2">单价(元/个/天)</div>
          <div class="dy-fx-2">总金额(元)</div>
          <div class="dy-fx-2">滞纳金比例</div>
          <div class="dy-fx-1">操作</div>
        </div>
        <div
          class="dy-flex ct-ladder-list border-b"
          v-for="(item, index) in costItem"
          v-if="item.expense_type == 'O'"
        >
          <div class="dy-fx-3 border-r">
            <span class="data-sj sj-o" @click="getcostY(index, $event, 'O', '285')">
              <input
                type="text"
                class="w-max text-center color-999 maopao"
                v-model="item.expense_name"
                readonly
              >
            </span>
          </div>

          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.price"
              @blur="hideFkjH(item.price,$event)"
            >
          </div>

          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.amount"
              @blur="hideFkjH(item.amount,$event)"
            >
          </div>

          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.late_fee"
              @blur="addbfb(item.late_fee, index)"
              @focus="cancelbfb(costItem, index, 'late_fee', item.late_fee)"
            >
          </div>

          <div class="dy-fx-1">
            <a href="javascript:;" @click="delCostItem(index)">删除</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 临时费项 -->
    <div class="ct-rt-one mt-15">
      <div class="clearfix">
        <div class="pull-left ct-tit">临时费项</div>
        <div class="pull-right">
          <span class="ct-rd-add" @click="addCostItem('T')">
            <b class="icon-Org-account"></b>
            新增
          </span>
        </div>
      </div>
      <div class="border mt-15" v-if="ttotal > 0">
        <div class="dy-flex ct-ladder-list bg-filter border-b color-gray">
          <div class="dy-fx-2">费用名</div>
          <div class="dy-fx-3">金额(元)</div>
          <div class="dy-fx-1">操作</div>
        </div>
        <div
          class="dy-flex ct-ladder-list border-b"
          v-for="(item, index) in costItem"
          v-if="item.expense_type == 'T'"
        >
          <div class="dy-fx-2 border-r">
            <input
              type="text"
              class="w-max text-center color-999"
              v-model="item.expense_name"
              @blur="hideFkjH(item.expense_name,$event)"
            >
          </div>
          <div class="dy-fx-3 border-r">
            <input
              type="text"
              class="w-max text-center"
              v-model="item.amount"
              @blur="hideFkjH(item.amount,$event)"
            >
          </div>
          <div class="dy-fx-1">
            <a href="javascript:;" @click="delCostItem(index)">删除</a>
          </div>
        </div>
      </div>
    </div>
    <div class="ptb-10">
      <a href="javascript:;" class="btn n-btn-primary next-step-btn js-next-step mr-16" type="submit" @click="prevData">上一步</a>
      <button class="btn n-btn-outline mr-16" type="button" @click="fkjh">生成付款计划</button>
      <button class="btn n-btn-outline" type="button" @click="fkjh1">使用原付款计划</button>
    </div>
    <!-- 弹窗 -->
    <div class="t-mark hidden">
      <div class="lingtou">
        <div class="title">零头处理</div>
        <div class="container-t border-b">
          <div class="dy-flex" style="padding-top:55px;">
            <div class="dy-fx-1 line-height-34">数据精确：</div>
            <div class="dy-fx-5">
              <div>
                <div class="select-ul" style="width:70%;">
                  <span class="select-name js-jqsz br-4 box-i-shadow">请选择</span>
                  <ul>
                    <li data-num="0.1">0.1</li>
                    <li data-num="1">1</li>
                    <li data-num="10">10</li>
                    <li data-num="100">100</li>
                    <li data-num="1000">1000</li>
                    <li data-num="10000">10000</li>
                  </ul>
                </div>
                元
              </div>
              <div class="font-12 color-gray mt-6">说明：1精确到1元，10精确到10元，以此类推。</div>
            </div>
          </div>
          <div class="dy-flex mt-15">
            <div class="dy-fx-1 line-height-34">处理方式：</div>
            <div class="dy-fx-5">
              <ul class="cr-type-select clearfix js-sywr">
                <li class="active" data-st="sy">四舍五入</li>
                <li data-st="xx">向下取整</li>
                <li data-st="xs">向上取整</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="text-center mt-10">
          <button class="n-btn-primary br-4 js-query-num">确定</button>
          <button class="n-btn-outline ml-5 br-4 js-cancel-num">取消</button>
        </div>
      </div>
    </div>
    <!--付款计划-->
    <section class="ptb-10 js-pay-plan-cr hide" id="pay-plan">
        <div class="clearfix">
          <div class="pull-left"><h3 class="font-16">付款计划</h3></div>
          <div class="pull-right">
            <button type="button" class="btn s-btn-default mt-10 js-edit-contract-btn1 mr-10 hide">零头处理</button>
            <button type="button" class="btn s-btn-default mt-10 js-edit-contract-btn">编辑</button>
          </div>
        </div>

        <div class="text-center br-4 mb-10 border pay-plan-table">
            <div class="clearfix title">
                <div class="item-1">账单开始日期</div>
                <!--<div class="item-1">合同开始日期(<span class="js-rent-date-num"></span>)</div>-->
                <div class="item-2">账单结束日期</div>
                <div class="item-2">收款日</div>
                <div class="item-3 js-title-rent-item"><span>固定租金</span>(元)</div>
                <!--固定费项-->
                <div class="item-4 js-title-one-expense hide"><span>一次性费用</span>(元)</div>
                <div class="item-6 js-title-yxj-expense hide"  style="width:120px;"><span>意向金抵扣</span>(元)</div>
                <div class="item-5">合计(元)</div>
            </div>

            <div class="body">
                <div class="first-expense-row expense-row">
                    <div class="item-1"><i></i></div>
                    <div class="item-2">
                        <label  class="relative">
                            <input type="text" class="form-control rent-pay-day js-contract-end-day" readonly>
                        </label>
                    </div>
                    <div class="item-2">
                        <label  class="relative">
                            <input type="text" class="form-control rent-pay-day js-rent-pay-day" readonly>
                        </label>
                    </div>
                    <div class="item-3 type-r js-body-rent-item">
                        <span class="js-title-p-item">
                            <input type="text" class="form-control text-center js-rentPrice js-plan-expense-item" disabled>
                        </span>
                    </div>
                    <!--固定费项-->
                    <div class="item-4 js-body-one-expense hide">
                        <ul></ul>
                        <!--一次性费项-->
                    </div>
                    <div class="item-6 js-body-intent-expense type-i hide">
                        <span class="js-title-i-item">
                            <input type="text" class="form-control text-center js-intentPrice js-plan-expense-item" disabled>
                        </span>
                    </div>
                    <div class="item-5 js-expense-price">0.00</div>
                </div>
                <div class="js-other-expense-cr">

                </div>
            </div>
        </div>
        <h3 class="font-16">小计：</h3>
        <div class="text-center br-4 mb-10 border totalPrice-tb js-totalPrice-tb box-i-shadow">
            <div class="title border-b clearfix">
                <div class="item-1 ">费用</div>
                <div class="item-2  js-title-rent-price-item">固定租金</div>
                <div class="item-2  js-title-intent-price-item hide">意向金抵扣</div>
                <!--固定费项-->
                <!--一次性费项-->
            </div>
            <div class="body clearfix">
                <div class="item-1 ">金额（元）</div>
                <div class="item-2 js-body-rent-price-item">0.00</div>
                <div class="item-2 js-body-intent-price-item hide">0.00</div>
                <!--固定费项-->
                <!--一次性费项-->
            </div>
        </div>
        <div class="total-price mb-10"><strong>合计应付：</strong><span class="js-price-contract"></span> 元</div>
        <button class="btn n-btn-primary" v-if="!reletFlag" @click="saveSubmit(2)">保存</button>
        <button class="btn n-btn-primary" v-if="reletFlag" @click="saveSubmit(1)">保存</button>
    </section>
    <ul class="abs-costitem hide">
      <li v-for="(item, index) in cTData" v-if="item.type == cTType" @click="setCost(index)">{{item.name}}</li>
    </ul>
  </section>

  <div class="marks-date" v-show="billDate.dateFlag">
    <div class="mark-container">
      <div class="title">计费时间</div>
      <div class="close" @click="calDate">x</div>
      <div style="padding: 25px; background: #f2f2f2;">
        <div class="box-i-shadow-1 bg-fff br-4">
          <div class="dy-flex color-gray text-center" style="line-height: 34px;">
            <div class="dy-fx-1 border-r">序号</div>
            <div class="dy-fx-2 border-r">开始时间</div>
            <div class="dy-fx-2 border-r">结束时间</div>
            <div class="dy-fx-2">操作</div>
          </div>
          <div class="dy-flex color-gray text-center border-t" style="line-height: 34px;" v-for="(item, index) in billDate.dates">
            <div class="dy-fx-1 border-r">{{index+1}}</div>
            <div class="dy-fx-2 border-r">
              <label class="icon-Gm-calendar relative">
                <input type="text" readonly="readonly" placeholder="起始时间" @click="inpIndex(index, 'dateKs')" class="inp form-control bg-fff dateKs br-0">
              </label>
            </div>
            <div class="dy-fx-2 border-r">
              <label class="icon-Gm-calendar relative">
                <input type="text" readonly="readonly" placeholder="结束时间" @click="inpIndex(index, 'dateJs')" class="inp form-control bg-fff dateJs br-0">
              </label>
            </div>
            <div class="dy-fx-2">
              <a @click="delDate(index)">删除</a>
            </div>
          </div>
        </div>
        <div class="button-date mt-10">
          <button type="button" class="btn s-btn-default mr-10" style="height:28px;line-height:28px; padding:0 10px;" @click="addDate">添加一行</button>
          <button type="button" v-show="billDate.dates.length" class="btn s-btn-default mr-10" style="height:28px;line-height:28px; padding:0 10px;" @click="completion">自动补全</button>
        </div>
      </div>
      <div class="footer-date-container text-center" style="padding:5px 0;">
        <button class="n-btn-primary br-4 text-center" @click="queryDate">确定</button>
        <button class="n-btn-outline br-4 text-center mlr-24" @click="resetDate">重置</button>
        <button class="n-btn-outline br-4 text-center" @click="calDate">取消</button>
      </div>
    </div>
  </div>
</section>
<style media="screen">
  .marks-date {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .mark-container {
    width: 480px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }
  .mark-container .title {
    font-size: 16px;
    line-height: 44px;
    text-align: center;
  }
  .mark-container .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
  }
	.sj-o:before {top:30px;}
</style>
<script src="modules/contract/scripts/contract_edit2.js" charset="utf-8"></script>
<script src="modules/contract/scripts/pay_plan.js" charset="utf-8"></script>
